@import "../../../../style/pc/fk/theme";
@import "../../../tippy/style/fk";
@import "../../../../style/pc/fk/tippy-theme-widget";
.lexmis-Select{
	display:inline-flex;
	align-items:center;
	width:100%;
	height:$-form-widget-height;
	background:#fff;
	border:1px solid $-border-color;
	transition:$-form-widget-transition;
	transition-property:border-color,box-shadow;
	vertical-align:middle;
	cursor:pointer;
	user-select:none;
	&.lexmis--square{
		border-radius:$-form-widget-border-radius;
	}
	&.lexmis--round{
		border-radius:$-form-widget-height / 2;
		padding:0 3px;
	}
	&.lexmis--noBorder{
		border:0;
		background:transparent;
		&.lexmis--focus{
			box-shadow:none;
		}
	}
	&:focus{
		outline:0;
	}
	&:hover,&:focus{
		border-color:$-primary-color;
	}
	&.lexmis--focus{
		border-color:$-primary-color;
		box-shadow:$-form-widget-box-shadow;
		>.lexmis_arrow{
			transform:rotate(270deg);
		}
	}
	&.lexmis--disable{
		position:relative;
		border-color:$-border-color;
		background:$-disable-color;
		cursor:not-allowed;
	}
	&.lexmis--clearable:hover{
		>.lexmis_arrow{
			display:none;
		}
		>.lexmis_clearable{
			display:inline-block;
		}
	}
	>.lexmis_content{
		position:relative;
		line-height:$-form-widget-height - 2;
		width:100%;
		font-size:$-content-font-size;
		padding:0 0 0 $-mini-gap;
		color:transparent;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		user-select:none;
		>input{
			position:absolute;
			width:100%;
			height:100%;
			top:0;
			left:0;
			outline:0;
			border:0;
			background:none;
			font-size:$-content-font-size;
			padding:0 0 0 $-mini-gap;
			color:$-title-color;
			z-index:1;
			cursor:pointer;
			&::placeholder{
				color:$-sub-color;
			}
		}
	}
	>.lexmis_arrow{
		width:26px;
		flex-shrink:0;
		font-size:19px;
		color:$-arrow-color;
		transform:rotate(90deg);
		transition:transform $-form-widget-transition;
	}
	>.lexmis_clearable{
		display:none;
		width:26px;
		flex-shrink:0;
		font-size:18px;
		color:$-arrow-color;
		cursor:pointer;
	}
}
.lexmis_Select_Tippy{
	vertical-align:middle;
}
.tippy-box[data-theme~='lexmis-widget']{
	.lexmis_Select_options{
		@include tippy-option;
		.lexmis_option{
			&.lexmis_select{
				color:#fff;
				background:$-primary-color;
			}
		}
	}
	.lexmis_nodata{
		@include tippy-option-content;
		color:$-sub-color;
	}
}
